<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>放大镜效果</title>
		<style type="text/css">
			#small{width: 560px; height: 400px; position: absolute; left: 50px; top: 100px;}
			#small img{width: 100%; height: 100%;}
			#mark{width: 200px; height: 200px; background-color: white; opacity: 0.3; filter: alpha(opacity=50); position: absolute; left: 0px; top: 0px; display: none;}
			#big{width: 400px; height: 400px; border: 1px solid black; left: 800px; top: 100px; position: absolute; overflow: hidden; display: none;}
			#big img{width: 1120px; height: 800px;position: absolute; left: 0px; top: 0px;}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				//第一步：通过getElementById获取id为small、big、mark的元素节点
				//        通过getElementsByTagName获取id为big的div中的img元素节点
				//第二步：给id为small的元素节点添加mouseover/mouseout/mousemove事件
							// mouseover事件
									// 1、id为mark和big的div的.style.displ="block";
							// mouseout事件
									// 1、id为mark和big的div的.style.displ="none";
							// mousemove事件
									// 1、获取id为samll的div遮罩层的位置
									// 2、判断遮罩层是否有出边界
									// 3、改变id为mark的div的位置
									// 4、改变右边大图片的位置，与左边遮罩层的移动方向相反
				
				var Osmall = document.getElementById("small");
				var Obig = document.getElementById("big");
				var Omark = document.getElementById("mark");
				var ObigImg = Obig.getElementsByTagName("img")[0];
				
				//移入
				Osmall.onmouseover = function(){
					Omark.style.display = "block";
					Obig.style.display = "block";
				}
				
				//移出
				Osmall.onmouseout = function(){
					Omark.style.display = "none";
					Obig.style.display = "none";
				}
				
				//移动
				Osmall.onmousemove = function(ev){
					var e = ev || window.event;
					
					//获取遮罩层的位置
					var x = e.clientX - Osmall.offsetLeft - 100;
					var y = e.clientY - Osmall.offsetTop - 100;
					
					//判断遮罩层是否有出边界
					if(x <= 0) x = 0;
					if(x >= 360) x = 360;
					if(y <= 0) y = 0;
					if(y >= 200) y = 200;
					
					//改变id为mark的div的位置
					Omark.style.left = x + "px";
					Omark.style.top = y + "px";
					
					/*
					    右边图片的移动方式，左边遮罩层如何移动，右边图片，反方向对应倍数移动
					*/
				   ObigImg.style.left = x * -2 + "px";
				   ObigImg.style.top = y * -2 + "px";
				}
			}
		</script>
	</head>
	<body>
		<div id="small">
			<img src="img/starry.jpg" alt="" />
			<div id="mark"></div>
		</div>
		<div id="big">
			<img src="img/starry.jpg" alt="" />
		</div>
	</body>
</html>
